<template>
  <view class="wrap">
    <qiun-data-charts
      :canvas2d="true"
      :canvasId="chartInfo.id"
      type="column"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script setup lang="ts">
import qiunDataCharts from '@/module/common/qiun-data-charts/qiun-data-charts.vue'
import { reactive, ref, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { educationList } from '../../../api/sleep'
// const state = reactive({
//   status: 'more',
//   pageNum: 0,
//   pageSize: 10,
//   isRefresh: false,
//   isCancel: false
// })
// const userInfo = ref({})
const chartData = ref(null)
const props = defineProps({
  empi: String,
  chartInfo: {
    type: Object,
    default: () => {}
  }
})
watch(
  () => props,
  (init) => {
    const option = init.chartInfo.option
    chartData.value = JSON.parse(JSON.stringify(option))
  },
  {
    immediate: true
  }
)
onShow(() => {
  //   userInfo.value = uni.getStorageSync('userInfo')
  //     ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
  //     : {}
})
const opts = {
  color: ['#C38F62'],
  padding: [15, 15, 0, 5],
  enableScroll: false,
  legend: {
    show: false
  },
  xAxis: {
    disableGrid: true,
    // axisLabel: {
    //   color: '#ff4a00' // 设置字体颜色为红色
    // }
    fontColor: '#7C5221',
    fontSize: 10,
    fontWeight: 500
  },
  yAxis: {
    disabled: true,
    // disableGrid: true,
    gridType: 'dash',
    data: [
      {
        min: 0
      }
    ]
  },
  extra: {
    column: {
      type: 'group',
      width: 15,
      activeBgColor: '#000000',
      activeBgOpacity: 0.08,
      barBorderRadius: [8, 8, 0, 0],
      //   barBorderCircle: true,
      linearType: 'custom',
      customColor: ['#EAA569'],
      color: '#ff4a00'
    }
  }
}

// const init = () => {
//   //   uni.showLoading({
//   //     title: '加载中'
//   //   })
//   //   articleType().then((res) => {
//   //     if (res.code == 0) {
//   //       tabList.value = res.data && res.data.length > 0 ? res.data : []
//   //       categoryNamesData.value = res.data[0].dictLabel.split(',')
//   //       educationListFun()
//   //     }
//   //   })
// }
const educationListFun = () => {
  state.pageNum++
  if (state.status == 'nomore') {
    return false
  }
  const param = {
    page: state.pageNum,
    limit: 10,
    // categoryName: '中医指导'
    categoryName: '疾病'
    // empi: userInfo.value.empi
  }
  educationList(param, state.isCancel).then((res) => {
    if (state.isRefresh == true) {
      state.isRefresh = false
      uni.stopPullDownRefresh()
    }
    uni.hideLoading()
    if (res.code == 0) {
      if (res.data && res.data.list && res.data.list.length > 0) {
        const dataList = res.data.list
        // for (let i = 0; i < dataList.length; i++) {
        //   dataList[i].itemContentTwo =
        //     dataList[i].itemContent && JSON.parse(dataList[i].itemContent).content
        //       ? JSON.parse(dataList[i].itemContent).content
        //       : ''
        //   dataList[i].titleTwo =
        //     dataList[i].itemContent && JSON.parse(dataList[i].itemContent).title
        //       ? JSON.parse(dataList[i].itemContent).title
        //       : ''
        //   dataList[i].idTwo =
        //     dataList[i].itemContent && JSON.parse(dataList[i].itemContent).id
        //       ? JSON.parse(dataList[i].itemContent).id
        //       : ''
        // }
        list.value = list.value.concat(dataList)
        if (res.data.list.length < 10) {
          state.status = 'nomore'
        } else {
          state.status = 'more'
        }
      } else {
        state.status = 'nomore'
      }
    }
  })
  return true
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}

.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: '.';
}

.wrap {
  //   min-height: 100vh;
  //   background: red;
}
</style>
